<template>
	<div>

		<!-- 状态选择 -->
		<el-tabs v-model="status" @tab-click="findOrders">
			<el-tab-pane v-for="item in statuses" :key="item.code" :label="item.name" :name="item.code.toString()"></el-tab-pane>
		</el-tabs>
		<!-- 按钮及搜索 -->
		<div class="action-bar">
			<div>
				<el-button size="small" type="success" icon="el-icon-document" @click="exportExcel">导出数据</el-button>
			</div>
			<el-form class="search-form" inline size="small" @submit.prevent.native="findOrders">
				<el-form-item>
					<el-date-picker v-model="dateValues" type="daterange" align="right" unlink-panels range-separator="至"
					 start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
					 @change="findOrders">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-input v-model="keyword" placeholder="订单号、下单人或收货人的手机号" maxlength="20" prefix-icon="el-icon-search" style="width: 260px;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" native-type="submit">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 订单列表 -->
		<el-table :data="orders" :loading="loading" stripe>
			<el-table-column label="订单编号" prop="orderNo" align="center"></el-table-column>
			<el-table-column label="订单状态" align="center">
				<template slot-scope="scope">
					<el-tag :type="scope.row.status | getStatusType">{{scope.row.statusDesc}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="下单时间" prop="createTime" align="center"></el-table-column>
			<el-table-column label="客户账号" prop="userPhone" align="center"></el-table-column>
			<el-table-column label="实付金额" :formatter="row => '￥' + row.payAmount" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button :loading="scope.row.detailsLoading" type="text" size="small" @click="openDetails(scope.row)">查看详情</el-button>
					<div>
						<el-button type="primary" size="mini" v-if="scope.row.status == 2" @click="prepared(scope.row.id)">已配货</el-button>
						<el-button type="primary" size="mini" v-if="scope.row.status == 4" @click="shipped(scope.row.id)">已发货</el-button>
						<el-button type="success" size="mini" v-if="scope.row.status == 30" @click="refund(scope.row.id)">同意退款</el-button>
						<el-button type="danger" size="mini" v-if="scope.row.status == 30" @click="refund(scope.row.id, false)">不予退款</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<div class="pagination-wrap" v-show="totalSize > pageSize">
			<el-pagination hide-on-single-page background @size-change="pageSizeChange" @current-change="pageNumberChange"
			 :current-page="pageNumber" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalSize">
			</el-pagination>
		</div>

		<!-- 订单详情 -->
		<el-dialog fullscreen :visible.sync="showDetails">
			<!-- 订单信息 -->
			<div slot="title" style="display: flex;align-items: center;" v-if="details.id">
				<span style="font-size: 18px;">订单号：{{details.orderNo}}</span>
				<el-tag style="margin-left: 30px;" :title="details.remark">{{details.statusDesc}}</el-tag>
			</div>
			<div class="details-wrap" v-if="details.id">
				<!-- 用户信息 -->
				<div class="user-info">
					<el-avatar :src="details.user.avatarUrl" :size="80"></el-avatar>
					<div style="margin-left: 20px;">
						<div class="name">{{details.user.name}}</div>
						<div class="phone">{{details.user.phone}}</div>
					</div>
				</div>

				<div class="main-wrap">
					<!-- 时间信息 -->
					<el-timeline class="time-info">
						<el-timeline-item v-for="(item, index) in steps" :key="index" v-if="details.time[item.key]" :timestamp="details.time[item.key]">{{item.name}}</el-timeline-item>
					</el-timeline>

					<div class="right-wrap">
						<!-- 商品信息 -->
						<div class="goods-info">
							<div class="goods" v-for="(item, index) in details.goodsList" :key="index">
								<el-image class="thumb" :src="item.thumbUrl" fit="cover"></el-image>
								<span class="name elip">{{item.name}}</span>
								<span class="price">{{item.price}}元 x {{item.count}}</span>
							</div>
						</div>
						<!-- 收货信息 -->
						<div class="shipping-info">
							<span>收货信息：</span>
							<div>
								<div>{{details.shipping.consignee}} {{details.shipping.phone}}</div>
								<div style="margin-top: 10px;">
									{{details.shipping.province}} {{details.shipping.city}} {{details.shipping.district}}
									{{details.shipping.address}}
								</div>
							</div>
						</div>
						<!-- 快递信息 -->
						<div class="express-info" v-if="details.express">
							<span>快递公司：</span>
							<a class="link" :href="details.express.linkUrl" target="_blank">{{details.express.name}}<i class="icon i-right-double"></i></a>
							<span style="user-select: text;">运单号：{{details.express.waybillNo}}</span>
						</div>
						<!-- 付款信息 -->
						<div class="payment-info">
							<div v-if="details.paymentNo">
								<span class="name">支付单号：</span>
								<span class="value">{{details.paymentNo}}</span>
							</div>
							<div v-if="details.payMode">
								<span class="name">支付方式：</span>
								<span class="value">{{details.payMode}}</span>
							</div>
							<div>
								<span class="name">订单金额：</span>
								<span class="value">{{details.totalAmount}}元</span>
							</div>
							<div>
								<span class="name">商品总价：</span>
								<span class="value">{{details.goodsAmount}}元</span>
							</div>
							<div>
								<span class="name">运费：</span>
								<span class="value">{{details.expressFee}}元</span>
							</div>
							<div>
								<span class="name">优惠金额：</span>
								<span class="value">-{{details.discountAmount}}元</span>
							</div>
							<div>
								<span class="name">实付金额：</span>
								<span class="value" style="font-size: 26px;">{{details.payAmount}}元</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 发货信息表单 -->
		<el-dialog title="发货信息" :visible.sync="showExpressForm" width="30vw">
			<el-form>
				<el-form-item label="快递名称">
					<el-select v-model="expressData.name" filterable allow-create default-first-option placeholder="请选择或输入快递名称">
						<el-option v-for="(item, index) in expressCompanys" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="查询网址">
					<el-input v-model="expressData.linkUrl" placeholder="请输入品牌介绍" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item label="快递单号">
					<el-input v-model="expressData.waybillNo" placeholder="请输入快递单号" maxlength="20"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="showExpressForm = false">取 消</el-button>
				<el-button type="primary" @click="submitExpress">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import orderConfig from '@/common/config/order/order.config.js';

	export default {
		data() {
			return {
				...orderConfig,
				status: '2',
				dateValues: '',
				keyword: '',
				orders: [],
				pageNumber: 1,
				pageSize: 10,
				totalSize: 0,
				loading: false,
				showDetails: false,
				details: {},
				showExpressForm: false,
				expressData: {
					name: '',
					linkUrl: 'https://www.kuaidi100.com',
					waybillNo: ''
				}
			}
		},
		created() {
			this.findOrders();
		},
		filters: {
			getStatusType(status) {
				const types = ['primary', 'success', 'info', 'warning', 'danger'];
				if (status >= 2 && status <= 6) return types[0];
				if (status == 8 || status == 10) return types[1];
				if (status == 30) return types[4];
				if (status == 32 || status == 34) return types[3];
				return types[2];
			}
		},
		methods: {
			findOrders(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				const startDate = this.dateValues ? this.dateValues[0] : '';
				const endDate = this.dateValues ? this.dateValues[1] : '';
				this.$util.request('/order', {
					status: this.status,
					startDate,
					endDate,
					keyword: this.keyword,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}, (res) => {
					this.loading = false;

					this.orders = res.list;
					this.totalSize = res.totalRow;
				}, true);
			},
			exportExcel() {
				if (!this.dateValues) return this.$util.msg('请选择开始和结束日期');
				if (this.orders.length == 0) return this.$util.msg('没有可导出的数据');

				const status = this.statuses.find(e => e.code == this.status).name;
				this.$confirm(`确定导出 ${this.dateValues[0]} 到 ${this.dateValues[1]} 的${status}的订单吗?`).then(_ => {
					let url =
						`${this.$util.baseUrl}/order/exportExcel?status=${this.status}&keyword=${this.keyword}&startDate=${this.dateValues[0]}&endDate=${this.dateValues[1]}`;
					url += '&token=' + this.$store.getters.token;
					window.open(url);
				}).catch(_ => {});
			},
			pageSizeChange(e) {
				this.pageSize = e;
				this.findOrders(true);
			},
			pageNumberChange(e) {
				this.pageNumber = e;
				this.findOrders(true);
			},
			openDetails(item) {
				item.detailsLoading = true;
				this.$util.request('/order/details', {
					id: item.id
				}, (res) => {
					item.detailsLoading = false;
					this.details = res;
					this.showDetails = true;
				}, true);
			},
			prepared(id) {
				this.$util.requestWithConfirm('确定已配货了吗?', '/order/prepared', {
					id
				}).then(_ => {
					this.findOrders(true);
				});
			},
			shipped(id) {
				this.orderId = id;
				this.showExpressForm = true;
			},
			submitExpress() {
				if (!this.expressData.name) return this.$util.msg('请选择或输入快递名称');
				if (!this.expressData.linkUrl) return this.$util.msg('请输入快递查询网址');
				if (!this.expressData.waybillNo) return this.$util.msg('请输入快递单号');

				const data = Object.assign({
					orderId: this.orderId
				}, this.expressData);
				this.$util.requestWithConfirm('确定提交吗?', '/order/shipped', data).then(_ => {
					this.showExpressForm = false;
					this.findOrders(true);
				});
			},
			refund(id, agree = true) {
				if (agree) {
					this.$confirm('确定退款吗?').then(_ => {
						this.submitRefund(id, null);
					}).catch(_ => {});
				} else {
					this.$prompt('输入不予退款原因', '退款失败', {
						inputValidator(val) {
							if (!val) return '请输入原因';
						}
					}).then(res => {
						this.submitRefund(id, res.value);
					}).catch(_ => {});
				}
			},
			submitRefund(id, remark) {
				const loading = this.$loading();
				this.$util.request('/order/refund', {
					id,
					remark
				}, (res) => {
					loading.close();

					if (res.state == 'ok') {
						this.showExpressForm = false;
						this.$message.success('操作成功');
						this.findOrders(true);
					} else {
						this.$util.msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.action-bar {
		display: flex;

		.search-form {
			margin-left: auto;
		}
	}

	.details-wrap {
		color: $text-color;
		margin-top: -20px;
		padding: 0 10vw;

		.user-info {
			@extend %flex-align-center;

			.name {
				font-size: 16px;
				font-weight: bold;
			}

			.phone {
				color: $text-color;
				font-size: 13px;
				margin-top: 5px;
			}
		}

		.main-wrap {
			display: flex;
			margin-top: 30px;
			
			.right-wrap {
				flex: 1;
				margin-left: 50px;
			}
			
			.goods-info {
				max-height: 250px;
				overflow-y: auto;

				.goods {
					font-size: 14px;
					@extend %flex-align-center;
					border-bottom: 1px solid $border-color;

					.thumb {
						width: 80px;
						height: 80px;
						margin-right: 10px;
					}

					.name {
						width: 350px;
						padding-right: 10px;
					}
				}
			}

			.shipping-info {
				display: flex;
				padding: 20px 0;
				border-bottom: 1px solid $border-color;
			}

			.express-info {
				padding: 20px 0;
				font-size: 13px;
				color: gray;

				.link {
					color: gray;
					margin-right: 20px;

					&:hover {
						color: $color-primary;
					}

					.icon {
						font-size: 12px;
					}
				}
			}

			.payment-info {
				text-align: right;
				line-height: 2;
				margin-top: 10px;

				.name {
					color: gray;
				}

				.value {
					display: inline-block;
					color: $color-primary;
					min-width: 150px;
				}
			}
		}
	}
</style>
